<template>
  <view class="page-item flex-row">
    <view class="left relative margin-right-24">
      <image :src="item.img" class="width-full height-full block" />
      <view class="plays width-full padding-top-24 flex-row">
        <image src="/static/play.png" class="play block" />
        <text class="text-18 color-white">{{ item.bfl }}万</text>
      </view>
    </view>
    <view class="right flex-column justify-between">
      <view class="flex-column">
        <view class="flex-row align-center justify-between">
          <text class="color-black text-32">{{ item.name }}</text>
        </view>
      </view>
      <view>
        <view class="flex-row align-center margin-bottom-10">
          <template v-if="item.now_count">
            <image src="/static/watching/history.png" class="history block margin-right-10" />
            <text class="text-24 color-t2">看到第{{item.now_count}}集 /</text>
          </template>
          <text class="text-24 color-t2">共{{item.seq_num}}集</text>
        </view>
        <by-button width="184rpx" height="56rpx" :font-color="colors.colorWhite" :text="type ? '立即观看' : '继续观看'" @click="jump(`/pages/detail/detail?tt_album_id=${item.album_id}&tt_episode_id=${item.episode_id}`)" />
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import colors from '@/style/style.module.scss'
import { jump } from '@/common/util'
import type { AnyObject } from '@/common/types'

interface IProps{
  item: AnyObject,
  type?: string
}

withDefaults(defineProps<IProps>(), {
  item: () => ({})
})
</script>

<style scoped lang="scss">
.page-item{
  &:last-child{
    margin-bottom: 0;
  }

  .left{
    width: 190rpx;
    height: 254rpx;
    border-radius: 8rpx;
    overflow: hidden;

    .plays{
      height: 58rpx;
      background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.51) 85%);
      padding-bottom: 8rpx;
      padding-left: 8rpx;
      @include position(absolute, $left: 0, $bottom: 0);
    }

    .play{
      width: 24rpx;
      height: 24rpx;
    }

  }

  .right{
    height: 254rpx;
    width: 496rpx;

    .collect{
      width: 40rpx;
      height: 40rpx;
    }

    .history{
      width: 32rpx;
      height: 32rpx;
    }

  }

}
</style>
